<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=none">
    <title>加入移动应用开发实验室</title>
</head>

<body>
    <div class="contain">
        <div class="head">
            <!-- <img src="" alt=""> -->
            <div class="head-text center-text">加入我们</div>
            <div class="decorate-line">
                <i class="block bg-web"></i>
                <i class="block bg-java"></i>
                <i class="block bg-android"></i>
                <i class="block bg-ios"></i>
            </div>
        </div>
        
            <div class="box-position">
                <div class="an-border-box">
                    <div class="web-border-animation"></div>
                    <div class="an-border-animation"></div>
                    <div class="java-border-animation"></div>
                    <div class="ios-border-animation"></div>
                <div class="form-box">
                    <div class="form-head-box">
                        <!-- <div class="line"></div> -->
                        <div class="form-head-text"><span>报名信息</span></div>
                        <!-- <div class="line"></div> -->
                        
                    </div>
                    <div class="tip hide">
                        <span>注：带<span class="star">*</span>为必填项</span>
                    </div>
                    <form action="http://localhost:3000/api/mob/apply" name="sign-up-form" method="POST" id="sign-up">
                        <div class="input-group">
                            <div class="input-box input-bd">
                                <div class="text-box">
                                    <span class="err none hide">*</span>
                                    <span>姓名</span>
                                </div>
                                <input id="name" type="text" value="" form="sign-up" name="name" autocomplete="off" disabled="disabled">
                            </div>
                            <div class="input-box input-bd">
                                <div class="text-box">
                                    <span class="err none hide">*</span>
                                    <span>班级</span>
                                </div>
                                <input id="class" type="text" value="" form="sign-up" name="class" autocomplete="off" disabled="disabled">
                            </div>
                            <!-- 渐变色线(实现) -->
                            <div class="dividing-line hide">
                                <i class="block bg-web"></i>
                                <i class="block bg-java"></i>
                                <i class="block bg-android"></i>
                                <i class="hide bg-ios"></i>
                            </div>
                            <div class="gradual-line hide"></div>
                            <div class="act-btn hide" id="next">下一步</div>


                            <div class="input-box input-bd">
                                <div class="text-box">
                                    <span class="err none">*</span>
                                    <span>电话</span>
                                </div>
                                <input id="phone" type="text" value="" placeholder="请输入电话" form="sign-up" name="tel"
                                    autocomplete="off">
                            </div>
                            <div class="input-box input-bd">
                                <div class="text-box">
                                    <span class="err none">*</span>
                                    <span>邮箱</span>
                                </div>
                                <input class="" id="email" type="email" value="" placeholder="请输入邮箱" form="sign-up"
                                    name="qq" autocomplete="off">
                            </div>
                            <div class="errTips">
                                <div class="tips err position-ele invisible" id="err">邮箱格式有误</div>
                            </div>

                            <div class="input-box" id="input-groups-box">
                                <div class="text-box">
                                    <span class="err none">*</span>
                                    <span id="group-text">意向分组</span>
                                </div>
                                <input type="radio" name="group" id="前端" value="1" hidden form="sign-up">
                                <input type="radio" name="group" id="Android" value="3" hidden form="sign-up">
                                <input type="radio" name="group" id="后台" value="2" hidden form="sign-up">
                                <input type="radio" name="group" id="ios" value="4" hidden form="sign-up">
                                <br>
                                <div class="group-radio">
                                    <label for="前端" class="center-text bd-web">前端</label>
                                    <label for="Android" class="center-text bd-android">安卓</label>
                                    <label for="后台" class="center-text bd-java">后台</label>
                                    <label for="ios" class="center-text bd-ios">iOS</label>
                                </div>
                            </div>
                            <div class="input-box time-input-box input-bd hide">
                                <div class="text-box">
                                    <span class="err none">*</span>
                                    <span class="text">
                                        选择时间
                                    </span>
                                    
                                </div>
                                <label for="time" class="center-text position-ele choose-time">
                                    
                                    <input type="text" value="" hidden name="time" id="select-hide-input">
                                    <div class="time-ico"><span>▲</span> </div>
                                    <select id="time" class="select-input" value="" form="sign-up">
                                        <option value="null" hidden></option>
                                    </select>
                                </label>
                            </div>
                            <div class="input-box wrap input-bd">
                                <textarea class="textarea-why" name="why" id="why" name="why" form="sign-up" maxlength="50" placeholder="为什么加入我们（50字以内）"></textarea>
                            </div>
                            
                        </div>
                    </form>
                </div>
            </div>
            </div>
        
        <div class="act-btn" id="submit">提交</div>

        <div class="circle-wrapper hide">
            <i class="circle bg-web circle1"></i>
            <i class="circle bg-java circle2"></i>
            <i class="circle bg-ios circle3"></i>
            <i class="circle bg-android circle4"></i>
        </div>

    </div>
</body>

</html>